import React from 'react'
import {Form, Input, Button,Icon,Spin,Checkbox,InputNumber } from 'antd';
import {Link} from 'react-router-dom'
import {inject, observer} from "mobx-react/index";

const FormItem = Form.Item;
@inject("store")
@observer
class LoginBodys extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            confirmDirty: false,
            loading:false
        }
    }

    toggle = (value) => {
        this.setState({ loading: value });
    }
    componentDidMount() {
        // To disabled submit button at the beginning.
        this.props.form.validateFields();
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.toggle(true)
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
           this.props.store.actions.login(values,this.toggle,this.props.form)
        });
    }
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
    hasErrors = (fieldsError) => {
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
    render() {
        const store=this.props.store
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const phoneError =  isFieldTouched('phoneNo') &&getFieldError('phoneNo');
        const passwordError =  isFieldTouched('password') &&getFieldError('password');
        return (
            <div className="sign-mainbody">
                <Spin spinning={this.state.loading}>
                <h2 className="sign-body-head">用户登陆</h2>
                <Form onSubmit={this.handleSubmit}>
                    <div style={{position:"relative"}}>
                        <div style={{position:"absolute",top:"-20px",fontSize:"12px"}}>手机号</div>
                        <div className="cuk-input">
                            <FormItem
                                validateStatus={phoneError ? 'error' : ''}
                                help={phoneError || ""}
                            >
                                {getFieldDecorator('phoneNo', {
                                    rules: [{ required: true, message: '请输入手机号!' },
                                        {min:11,max:16,message:"手机号在11位到16位之间"}],
                                })(
                                    <Input style={{width:"340px"}} size="large" onBlur={this.handleConfirmBlur}/>
                                )}
                            </FormItem>
                        </div>
                    </div>
                    <div style={{position:"relative"}}>
                        <div className="cuk-input">
                            <FormItem
                                validateStatus={passwordError ? 'error' : ''}
                                help={passwordError || ""}
                            >
                                {getFieldDecorator('password', {
                                    rules: [{ required: true, message: '请输入密码!' },
                                        {min:6,max:30,message:"密码在6位到30位之间"}],
                                })(
                                    <Input type="password" placeholder="密码" size="large" onBlur={this.handleConfirmBlur}/>
                                )}
                            </FormItem>
                        </div>
                    </div>
                    {/*<FormItem*/}
                    {/*>*/}
                        {/*{getFieldDecorator('isRemember', {*/}
                        {/*})(*/}
                            {/*<Checkbox>记住我</Checkbox>*/}
                        {/*)}*/}
                    {/*</FormItem>*/}
                    <FormItem>
                        <Button className="sign-button" type="primary" htmlType="submit"  disabled={this.hasErrors(getFieldsError())}>登录</Button>
                    </FormItem>
                </Form>
                <div className="to-other">
                    <Link to="/register">找回密码</Link>
                    <span className="sign-to-other">还没有账号？
                        <Link to="/sign/register">马上注册</Link>
                    </span>
                </div>
                <div style={{marginTop: "25px",textAlign:"center"}}>
                    <div className="otherlogin-line">
                        <div className="heng"/>
                        <span className="otherlogin-text">或使用以下账号登录</span>
                        <div className="heng"/>
                    </div>
                    <ul style={{marginTop:"15px"}}>
                        <li><Link to="#"><Icon className="weixinicon" type="wechat" /></Link></li>
                    </ul>
                </div>
                </Spin>
            </div>
        );
    }
}
const LoginBody = Form.create()(LoginBodys);
export default LoginBody